<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :stripe="true"
      :default-sort="{prop: 'generatedDate', order: 'descending'}"
    >
      <el-table-column
        prop="roadID"
        label="道路编号"
        align="center"
        sortable
        min-width="105"
      />
      <el-table-column
        prop="roadName"
        label="道路名称"
        align="center"
        width="180"
        min-width="105"
      />
      <el-table-column
        label="平整度检测情况"
        align="center"
        min-width="105"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.isDetectedFlatness==='是' ? 'success': 'danger'">{{ row.isDetectedFlatness==='是'? '已登记' : '未登记' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="损坏情况检测情况"
        align="center"
        min-width="105"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.isDetectedDamage==='是' ? 'success': 'danger'">{{ row.isDetectedDamage==='是'? '已登记' : '未登记' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="generatedTime"
        label="生成时间"
        align="center"
        sortable
        min-width="105"
      />
      <el-table-column
        fixed="right"
        label="操作"
        min-width="180px"
        align="center"
      >
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="primary" size="small" round @click="handleFlatness(row.regularInspectionID,row.flatnessID)">平整度</el-button>
            <el-button type="primary" size="small" round @click="handleDamage(row.regularInspectionID,row.pavementDamageComID)">损害情况</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title=""
      :visible.sync="dialogVisible1"
      width="60%"
      length="100%"
      :destroy-on-close="true"
    >
      <AddPavementFlatness :rule-form="flatness" @close-dialog="dialogVisible1=false" @flatness-submited="flatnessSubmited" />
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dialogVisible2"
      width="60%"
      length="100%"
      :destroy-on-close="true"
    >
      <AddPavementDamage :rule-form="damage" @close-dialog="dialogVisible2=false" @damage-submited="damageSubmited" />
    </el-dialog>
  </div>

</template>

<script>
import AddPavementFlatness from './components/AddPavementFlatness'
import AddPavementDamage from './components/AddPavementDamage'
import { regularInspectionPlan, searchPavementDamage } from '@/api/regularInspection'
import { searchPavementFlatness } from '@/api/regularInspection'
import { mapGetters } from 'vuex'
export default {
  components: {
    AddPavementFlatness,
    AddPavementDamage
  },
  data() {
    return {
      tableData: [],
      dialogVisible1: false,
      dialogVisible2: false,
      flatness: {
        regularInspectionID: '',
        userId: '',
        flatnessId: '',
        inspectDate: '',
        IRI: '',
        remarks: ''
      },
      damage: {
        regularInspectionID: '',
        damageId: '',
        inspectDate: '',
        userId: '',
        beginSite: '',
        totalLength: '',
        totalWidth: '',
        damageType: '',
        damageLength: '',
        damageWidth: '',
        damageHeight: '',
        comNumber: 1,
        desc: '',
        remark: ''
      },
      handledRegularInspectionID: ''
    }
  },
  computed: {
    ...mapGetters([
      'superDepartmentId',
      'userId'
    ])
  },
  created() {
    this.getAllRegularInspection()
  },
  methods: {
    getAllRegularInspection() {
      regularInspectionPlan({ departmentID: this.superDepartmentId }).then(response => {
        this.tableData = response
        this.tableData.forEach(
          function adjustFormat(item) {
            if (item.flatnessID == null) {
              item.isDetectedFlatness = '否'
            } else {
              item.isDetectedFlatness = '是'
            }
            if (item.pavementDamageComID == null) {
              item.isDetectedDamage = '否'
            } else {
              item.isDetectedDamage = '是'
            }
            const date = item.generatedTime
            item.generatedTime = [date.year, date.monthValue, date.dayOfMonth].join('-')
          }
        )
        this.$message.success('已刷新定期巡检计划表')
      })
    },
    handleFlatness(regularInspectionID, flatnessID) {
      if (flatnessID != null) {
        searchPavementFlatness({ flatnessID: flatnessID }).then(response => {
          this.flatness.flatnessId = flatnessID
          this.flatness.inspectDate = new Date([response.flatnessDate.year,
            response.flatnessDate.monthValue,
            response.flatnessDate.dayOfMonth].join('-'))
          this.flatness.IRI = response.iri
          this.flatness.remarks = response.remarks
        })
      } else {
        this.flatness.flatnessId = null
        this.flatness.inspectDate = null
        this.flatness.IRI = null
        this.flatness.remarks = null
      }
      this.flatness.regularInspectionID = regularInspectionID
      this.flatness.userId = this.userId
      this.handledRegularInspectionID = regularInspectionID
      this.dialogVisible1 = true
    },
    flatnessSubmited() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].regularInspectionID === this.handledRegularInspectionID) {
          this.tableData[i].isDetectedFlatness = '是'
          break
        }
      }
      this.getAllRegularInspection()
    },
    handleDamage(regularInspectionID, pavementDamageComID) {
      if (pavementDamageComID != null) {
        searchPavementDamage({ pavementDamageComID: pavementDamageComID }).then(response => {
          this.damage.damageComId = pavementDamageComID
          this.damage.inspectDate = new Date([response[0].inspectionDate.year,
            response[0].inspectionDate.monthValue,
            response[0].inspectionDate.dayOfMonth].join('-'))
          this.damage.beginSite = response[0].saeplace
          this.damage.totalLength = response[0].totalLength
          this.damage.totalWidth = response[0].totalWidth
          this.damage.damageType = response[0].damageTypeID
          this.damage.damageHeight = response[0].damageHeight
          this.damage.damageLength = response[0].damageLength
          this.damage.damageWidth = response[0].damageWidth
          this.damage.desc = response[0].damagePAC
          this.damage.remarks = response[0].remarks
          this.damage.damageId = response[0].damageID
        })
      } else {
        this.damage.damageId = null
        this.damage.inspectDate = null
        this.damage.beginSite = null
        this.damage.totalLength = null
        this.damage.totalWidth = null
        this.damage.damageType = null
        this.damage.damageHeight = null
        this.damage.damageLength = null
        this.damage.damageWidth = null
        this.damage.desc = null
        this.damage.remarks = null
      }
      this.damage.regularInspectionID = regularInspectionID
      this.damage.userId = this.userId
      this.handledRegularInspectionID = regularInspectionID
      this.dialogVisible2 = true
    },
    damageSubmited() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].regularInspectionID === this.handledRegularInspectionID) {
          this.tableData[i].isDetectedDamage = '是'
          break
        }
      }
      this.getAllRegularInspection()
    }
  }
}
</script>
